<template>
	<view>
		<view class="my-header" style="position: fixed;z-index:999">
			<view  class="jiaonang" :style="{ height: navHeight + 'px' }">
				<view class="jiaonang-box" :style="{ height: jiaonangHeight + 'px', paddingTop:  jiaonangTop + 'px', paddingRight: (jiaonangWidth+5)+ 'px' }">
					<view class="jiaonang-div" @tap="goSearch">
						<image class="jiaonang-div-img" src="../../static/sousuo.svg"></image>
						<input placeholder-style="color:#8292A2" disabled class="jiaonang-div-input" type="text" v-model="search" placeholder="店铺/服务/膳食" />
						<view class="jiaonang-div-txt">搜索</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content" :style="{top:navHeight+'px'}">
			<!-- <view  class="tuijian">
				<view class="tuijian-top">
					<view class="tuijian-top-left">智能推荐</view>
					<view class="tuijian-top-name">Hi,{{ nickname }}</view>
					<image :src="photo" class="tuijian-top-photo"></image>
					<image src="../../static/qiehuan.svg" @tap='toogleSelectType' class="tuijian-top-img"></image>
				</view>
				
			</view> -->
			<!-- <view class="card" >
				<view class="card-item" v-for="(service, index) in 7" :key="index">
					<image src="" class="card-item-img" mode=""></image>
					<view class="card-item-bottom" >
						<view class="card-item-txt">我是名称</view>
						<view v-if="hasServiceIdList.indexOf(service.serviceId)>0" class="card-item-btn card-item-dingyue" style="background: #1ABC9C;color:#fff" @click.stop="dingyue(service)">
							免费订阅
						</view>
						<view style="display: flex;align-items: center;" v-else >
							<view class="card-item-dingyue card-item-border" @tap="goServiceDetail(service)">
								去看服务
							</view>
							<view style="color:#E74C3C;font-weight: 400;font-size: 14px;margin-left:4px" @tap.stop="cancelSub(service)">取消订阅</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="tuijian">
				<view class="tuijian-item">
					<view class="tuijian-item-top">
						<view class="tuijian-item-top-1">健康顾问推荐</view>
						<view class="tuijian-item-top-2">
						</view>
					</view>
					<view class="tuijian-item-bottom">
						<image class="tuijian-item-bottom-1"  src="../../static/index/1.png" />
						<view class="tuijian-item-bottom-2">
							<view class="tuijian-item-bottom-2-1">代用名</view>
							<view class="tuijian-item-bottom-2-2">一级注册营养师</view>
							<view class="tuijian-item-bottom-2-3">立即订阅</view>
						</view>
					</view>
				</view>
				<view class="tuijian-item">
					<view class="tuijian-item-top">
						<view class="tuijian-item-top-1"></view>
						<view class="tuijian-item-top-2">
							<image src="../../static/index/more.svg" style="width: 42px;height:22px"  />
						</view>
					</view>
					<view class="tuijian-item-bottom">
						<image class="tuijian-item-bottom-1"  src="../../static/index/1.png" />
						<view class="tuijian-item-bottom-2">
							<view class="tuijian-item-bottom-2-1">代用名</view>
							<view class="tuijian-item-bottom-2-2">一级注册营养师</view>
							<view class="tuijian-item-bottom-2-3">立即订阅</view>
						</view>
					</view>
				</view>
			</view>
			<scroll-view v-if="activeIndex == 0" :scroll-y="true" :scrollbar="false" :scroll-into-view="scrollViewId" style="height: 100%;;background-color: #fff;"
				@scroll="scrollHandlerOne">
				<view class="scroll-item-card" v-for="(item,tagIndex) in tagData" :key="tagIndex" :id="item['viewName']">
					<view style="display: flex;
					align-items: center;justify-content: space-between;">
					<view style="display: flex;justify-content: space-between;flex-direction: column;">
						<view style="color:#2E4964;font-size: 32rpx;font-weight: 700;">{{item.name}}</view>
						<view style="font-size: 24rpx;font-weight: 400;color:#8292A2;margin-top:6rpx">左右滑动查看更多</view>
					</view>
					<view style="color:#1ABC9C;font-size: 28rpx;" @click="goSearchAll(item.name,item.serviceClassId)">
					查看全部</view>	
				</view>
					<view class="service-detail">
						<scroll-view :scroll-x="true" :scrollbar="false" :scroll-with-animation="true"
							:scroll-into-view="item['viewName']+item['nowColumnIndex'].toString()"
							style="white-space: nowrap">
							<view v-for="(columnIndex, index) of item['columnCount']" :key="index"
								:id="item['viewName']+columnIndex.toString()"
								@touchstart="touchStart($event,tagIndex,columnIndex)"
								@touchend="touchEnd($event,tagIndex,columnIndex)"
								style="display: inline-flex;width: 85%;flex-direction: column;">
								<view class="service-detail-item"
									v-for="(service,serviceIndex) in item['dataList'].slice(columnIndex*item['columnItemCount'],columnIndex*item['columnItemCount']+item['columnItemCount'])"
									@click.stop="goServiceDetail(service)" :key="serviceIndex">
									<view class="service-detail-item-pic">
											<wu-image
											:show-loading="true"
											:src="service.servicePic"
											width="86px"
											height="86px"
											radius="10px"
										>
										<template v-slot:loading>
											<image src="../../static/capin_defaultImg.svg" mode="scaleToFill"
											style="width: 86px;height: 86px;border-radius: 10px"  />
  										</template>
									</wu-image>
									</view>
									<view
										style="height: 86px;flex-grow: 1;display: flex;justify-content: space-around;flex-direction: column;align-items: flex-start;">
										<view class="service-detail-item-title">
											{{service.serviceName}}
										</view>
										<view v-if="hasServiceIdList.indexOf(service.serviceId)<0" class="service-detail-button" style="background: #1ABC9C;color:#fff" @click.stop="dingyue(service)">
											免费订阅
										</view>
										<view style="display: flex;align-items: center;" v-else >
											<view class="service-detail-button">
												去看服务
											</view>
											<view style="color:#E74C3C;font-weight: 400;font-size: 14px;margin-left:4px" @tap.stop="cancelSub(service)">取消订阅</view>
										</view>
									</view>
								</view>
							</view>
							<view style="display: inline-block;width: 20%;">
							</view>
						</scroll-view>
					</view>
				</view>
				<view style="height: 50px;background: #fff;"></view>
			</scroll-view>
		</view>
		<mytabbar class="my-foot" :active="1" :count="count"></mytabbar>
		<uni-popup ref="popup3" type="center" background-color="white">
			<view class="pop3">
					<view style="background-color: white;border-radius: 5px;padding: 10px;">
						<view class="titai">
							<view class="titai-left">
								<view style="font-size: 14px;font-weight: 700;color:#8292A2">体态档案模式</view>
						<view style="margin-top: 5px;font-size: 14px;font-weight:400;color: #7F8C8D;">按订阅和体态档案提供服务。</view>
							</view>
							<view class="titai-right" @tap="newDoc()">+ 新档案</view>
						</view>
						<view
							:class="searchOnlyStoreData.postureIds.indexOf(item.id)>-1?'selectgroupandposture-box-item-select':'selectgroupandposture-box-item' "
							v-for="(item, indexPos) in posturesList" :key="indexPos" @click="selectPosture(item)">
							<view
								style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap; font-weight: 700;max-width: 180px; font-size: 16px;color:#2E4964">
								{{item.name}}
							</view>
							<image v-if="item.profilePhoto" :src="item.profilePhoto" style="width: 20px;height: 20px;margin-right: 4px;border-radius: 50%;" />
							<image v-else src="../../static/logo3.png" style="width: 20px;height: 20px;margin-right: 4px;border-radius: 50%;" />
							<view style="display: inline-flex;flex-grow: 1;justify-content: flex-end;">
								<view style="height: 24px;width: 24px;border-radius: 12px;border: 1px solid #1ABC9C;"
									v-if="searchOnlyStoreData.postureIds.indexOf(item.id)<=-1"></view>
								<view
									style="display: flex;justify-content: center;align-items: center; height: 24px;width: 24px;border-radius: 12px;border: 1px solid #1ABC9C;background-color: #1ABC9C;"
									v-if="searchOnlyStoreData.postureIds.indexOf(item.id)>-1">
									<uni-icons type="checkmarkempty" size="20" color="white"></uni-icons>
								</view>
							</view>
						</view>
					</view>
					<view style="height:1px;width:calc(100% + 20px);margin:10px 0 10px -10px;background:#efefef"></view>
					<view style="background-color: white;border-radius: 5px;padding: 10px">
						<view class="titai">
							<view class="titai-left">
								<view style="font-size: 14px;font-weight: 700;color:#8292A2">多人/群组模式</view>
						<view style="margin-top: 5px;font-size: 14px;font-weight:400;color: #7F8C8D;">按群成员和订阅和体态提供服务。</view>
							</view>
							<view class="titai-right" @tap="newGroup()">+ 新群组</view>
						</view>
						<view
							:class="searchOnlyStoreData.groupId==item.id?'selectgroupandposture-box-item-select':'selectgroupandposture-box-item' "
							v-for="(item, indexG) in groupList" :key="indexG" @click="selectGroup(item)">
							<view style="display: flex;align-items: center;">
								<view
									style="margin-right:10px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap; font-weight: 700;max-width: 180px; font-size: 16px;color:#2E4964">
									{{item.name}}
								</view>
								<view style="flex:1;display: flex;align-items: center;">
									<image v-for="(item, index) in item.photos" :key="index" :src="item" style="width: 26px;height:26px;border-radius: 50%;margin-left: -10px" />
								</view>
							</view>
							<view style="display: inline-flex;flex-grow: 1;justify-content: flex-end;">
								<view style="height: 24px;width: 24px;border-radius: 12px;border: 1px solid #1ABC9C;"
									v-if="searchOnlyStoreData.groupId!=item.id"></view>
								<view
									style="display: flex;justify-content: center;align-items: center; height: 24px;width: 24px;border-radius: 12px;border: 1px solid #1ABC9C;background-color: #1ABC9C;"
									v-if="searchOnlyStoreData.groupId==item.id">
									<uni-icons type="checkmarkempty" size="20" color="white"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>
		</uni-popup>
	</view>
</template>

<script>
import {
	mapGetters
} from "vuex";
	import mytabbar from '../../components/my-tabbar/index.vue';
	import myheader from '../../components/header/index.vue';
	export default {
		components: {
			mytabbar,
			myheader
		},
		data() {
			return {
				tagData: [],
				tagItemHieght: 100,
				headerHight: 95,
				currentTagIndex: 0,
				scrollViewId: "",
				hasServiceIdList: [],
				serviceDetailXMoveInfo: {
					startTime: 0,
					endTime: 0,
					startPosition: 0,
					endPosition: 0
				},
				subCount: 0,
				arr: ['全部', '热门'],
				activeIndex: 0,
				navHeight: '',
				jiaonangTop: '',
				jiaonangHeight: '',
				jiaonangWidth: '',
				searchOnlyStoreData: {
					page: 1,
					pageSize: 6,
					isRefresh: 1,
					storeIds: [],
					storeId: 0,
					position: "",
					weatherName: "",
					weathertype: "",
					mealSeg: "",
					dishType: [],
					foodType: [],
					flavorType: [],
					cuisineType: [],
					cookingType: [],
					postureIds: [],
					groupId: 0,
					season: "",
					showSelectmealSegFlag: false,
				},
				posturesList: [],
				groupList: [],
			}
		},
		computed: {
			...mapGetters(["nickname", "photo", "count"]),
			tagList() {
				let dataList = this.tagData.map(function(item) {
					return item.name;
				});
				return dataList;
			}
		},
		async onLoad() {
		},
		mounted() {
			  const systemInfo = uni.getSystemInfoSync();
			  const menuButtonObject = uni.getMenuButtonBoundingClientRect();
			  let statusBarHeight = systemInfo.statusBarHeight
			  this.navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
			  this.jiaonangTop = menuButtonObject.top; //胶囊距离顶部距离
			  this.jiaonangHeight = menuButtonObject.height - 2; //胶囊高度
			  this.jiaonangWidth = systemInfo.windowWidth - menuButtonObject.right + menuButtonObject.width // 胶囊按钮与右侧的距离 = windowWidth - right+胶囊宽度; //胶囊宽度(包括右边距离)
		},
		async onShow() {
			
			// 获取热门   
			await this.getHot()
			await this.getDataList();
			// 获取顶部高度
			this.init();
			// nickname  代表登录了
			if (this.nickname) {
				this.gethasServiceIdList();
				this.getPostures()
				this.getGroupDataList()
			}
			// 获取推荐
		},
		onShareAppMessage(res) {
		
		return {
			title: '好友分享了吃巧【吃巧Ai营养师】',
			path: '/pages/index/index',
			imageUrl: "https://www.chideqiao.com/api/images/myhm-static/share_1.png"

		};
},
		methods: {
			async getPostures() {
				let res = await this.$H.get("portal/posture/searchPostures");
				if (res.code == 0) {
					this.posturesList = res.data;
				}
			},
			async getGroupDataList() {
				this.$H.get("portal/group/searchGroups").then((res => {
					if (res.code == 0) {
						this.groupList = res.data;
					}
				}));
			},
			async selectPosture(item) {
			
			},
			async selectGroup(item) {
				this.searchOnlyStoreData.postureIds = [];
				this.searchOnlyStoreData.groupId = item.id;
				this.$refs.popup3.close()
				this.$forceUpdate();
			},
			newGroup() {
				uni.navigateTo({
					url: "/pages/my/groupList"
				});
				this.$refs.popup3.close()
			},
			newDoc() {
				uni.navigateTo({
					url: "/pages/my/physiqueArchives"
				});
				this.$refs.popup3.close()
			},
			toogleSelectType() {
				this.$refs.popup3.open()
			},
			goSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			getHot() {
				
			},
			async itemClick(index) {
				if (index !== this.activeIndex) {
						this.activeIndex = index
						// 请求数据
						if(index == 0){
							await this.getDataList();
							if (this.nickname) {
								this.gethasServiceIdList();
							}
						}
						if(index == 1){
							
						}
				}
			},
			skip() {
				if (!this.nickname) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				} else {
					this.subCount = 0
					uni.setStorageSync('isFirstLogin', 1)
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			mySub() {
				if (!this.nickname) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				} else {
					this.subCount = 0
					uni.setStorageSync('isFirstLogin', 1)
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			gethasServiceIdList() {
				this.$H.post("portal/sub/searchIds").then((res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.hasServiceIdList = res.data;
						if(res.data.length> 0) {
							this.subCount = res.data.length
						} else {
							this.subCount = 0
						}
						this.$forceUpdate();
					}
				}));
			},
			async getDataList() {
				let res = await this.$H.postToB('portal/discover');
				if (res.code == 0) {
					this.tagData = [];
					for (let i = 0; i < res.data.length; i++) {
						let dataList = [];
						for (let j = 0; j < res.data[i].services.length; j++) {
							dataList.push({
								"serviceId": res.data[i].services[j].id,
								"servicePic": res.data[i].services[j].mainPic,
								"serviceName": res.data[i].services[j].name,
								"storeId": res.data[i].services[j].storeId,
								"storeLogo": res.data[i].services[j].storeLogo,
								"storeName": res.data[i].services[j].storeName,
								"subStatus": res.data[i].services[j].subStatus,
								"tags": res.data[i].services[j].tags,
							});
						}
						this.tagData.push({
							"name": res.data[i]["serviceClassName"],
							"serviceClassId": res.data[i]["serviceClassId"],
							"viewName": "viewname" + res.data[i]["serviceClassId"].toString(),
							"columnCount": 10,
							"columnItemCount": 2,
							"nowColumnIndex": 0,
							"dataList": dataList,
						})
					}
					uni.hideLoading()
					this.$forceUpdate();
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				}
			},
			init() {
				// for (let i = 0; i < this.tagData.length; i++) {
				// 	this.tagData[i]["columnCount"] = Math.ceil(this.tagData[i]['dataList'].length / this.tagData[i][
				// 		'columnItemCount'
				// 	]);
				// }
				// this.scrollViewId = this.tagData[0]["viewName"];
				let selectQuery = uni.createSelectorQuery().in(this);
				// selectQuery.selectAll('.scroll-item-card').boundingClientRect(rect => {
				// 	this.tagItemHieght = rect[0].height;
				// }).exec()
				selectQuery.selectAll('.my-header').boundingClientRect(rect => {
					this.headerHight = rect[0].height;
				}).exec()
				this.$forceUpdate();
			},
			goSearchAll(serviceClassName, serviceClassId) {
				uni.navigateTo({
					url: "/pages/find/searchAll?serviceClassId=" + serviceClassId.toString() + "&serviceClassName=" +
						serviceClassName
				});
			},
			touchStart(event, tagIndex, columnIndex) {
				// this.serviceDetailXMoveInfo.startTime = Date.now()
				// this.serviceDetailXMoveInfo.startPosition = event.changedTouches[0].clientX
			},
			touchEnd(event, tagIndex, columnIndex) {
				// let endTime = Date.now()
				// this.serviceDetailXMoveInfo.endTime = Date.now()
				// this.serviceDetailXMoveInfo.endTime = endTime;
				// this.serviceDetailXMoveInfo.endPosition = event.changedTouches[0].clientX;
				// let endposition = ''
				// // 区别一下点击事件和滑动事件
				// if (this.serviceDetailXMoveInfo.endPosition - this.serviceDetailXMoveInfo.startPosition > 10) {
				// 	endposition = 'right'
				// }
				// if (this.serviceDetailXMoveInfo.endPosition - this.serviceDetailXMoveInfo.startPosition < -10) {
				// 	endposition = 'left'
				// }
				// if (endposition == 'right') {
				// 	if (this.tagData[tagIndex]['nowColumnIndex'] > 0) {
				// 		this.tagData[tagIndex]['nowColumnIndex'] = this.tagData[tagIndex]['nowColumnIndex'] - 1;
				// 		this.$forceUpdate();
				// 	}
				// } 
				// if (endposition == 'left') {
				// 	if (this.tagData[tagIndex]['nowColumnIndex'] + 1 < this.tagData[tagIndex]['columnCount']) {
				// 		this.tagData[tagIndex]['nowColumnIndex'] = this.tagData[tagIndex]['nowColumnIndex'] + 1;
				// 		this.$forceUpdate();
				// 	}
				// }
			},
			changeTag(e) {
				uni.showLoading({
					title: '加载中...',
					icon: 'none'
				})
				setTimeout(() => {
					uni.hideLoading()
				}, 1000)
				this.scrollViewId = this.tagData[this.currentTagIndex]['viewName'];
				this.$forceUpdate();
			},
			scrollHandlerOne(e) {
				let scrollHeight = e.detail.scrollHeight;
				let scrollTop = e.detail.scrollTop;
				let currentIndex = Math.floor(scrollTop / this.tagItemHieght);
				if (currentIndex < this.tagData.length) {
					this.currentTagIndex = currentIndex;
				}
			},
			dingyue(service) {
				if (!this.nickname) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				} else {

					let postData = {
						"serviceId": service.serviceId,
						storeId: service.storeId
					}
					uni.showLoading({
						title: '正在订阅...',
						mask: true
					});
					this.$H.post("portal/sub/sub?serviceId=" + service.serviceId + '&storeId=' + service.storeId, postData).then(res => {
						uni.hideLoading();
						if (res.code == 0) {
							uni.showToast({
								title: "订阅成功",
								icon: "none"
							})
							this.gethasServiceIdList();
							this.subCount++
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					});
				}
			},
			cancelSub(service) {
				let that = this
				uni.showModal({
					content: '确定要取消订阅吗',
					confirmColor: "#E02828",
					success: function (res) {
						if (res.confirm) {
							uni.showLoading({
								title: '取消中',
								mask: true
							})
							that.trueCancel(service)
						} else if (res.cancel) {
							return false;
						}
					},
				});
				
			},
			trueCancel(service) {
				this.$H.delete("portal/sub/cancelSub?subId=" + service.serviceId).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						uni.showToast({
							title: "取消成功",
							icon: "none"
						})
						this.gethasServiceIdList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			goServiceDetail(item) {
				console.log(item);
				uni.navigateTo({
					url: "/pages/service/serviceDetail?serviceId=" + item.serviceId
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pop3 {
		width: 670rpx;
		border-radius: 20rpx;
		background: #fff;
		padding: 20rpx;
		max-height: 70vh;
		overflow: scroll;
	}
	.titai {
		display: flex;
		&-left {
			display: flex;
			flex-direction: column;
			flex:1;
			justify-content: space-evenly;
		}
		&-right {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 20rpx;
			font-size: 28rpx;
			font-weight: 700;
			color: rgba(26, 188, 156, 1)
		}
	}
	.selectgroupandposture-box-item {
		margin-top: 10px;
		border: 1px solid #EAECEF;
		padding: 10px 10px 10px 10px;
		border-radius: 5px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.selectgroupandposture-box-item-select {
		margin-top: 10px;
		padding: 10px 10px 10px 10px;
		border-radius: 5px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		// background-color: #1ABC9C;
		border: 1px solid rgba(26, 188, 156, 0.1);
		background: rgba(26, 188, 156, 0.1);
	}
	.card {
		padding: 10px 20px 50px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		background: #fff;
		&-item {
			display: flex;
			flex-direction: column;
			width:162px;
			border: 1px solid #ecefea;
			border-radius: 5px;
			margin-bottom: 10px;
			&-bottom {
				border-bottom-left-radius: 5px;
				border-bottom-right-radius: 5px;
				padding: 10px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			&-img {
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
				width: 162px;
				height: 162px;
				background: #EAECEF;
			}
			&-txt {
				color: #34495E;
				font-size: 16px;
				font-weight: 400;
				white-space: normal;
				word-break: break-all;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				margin-bottom: 10px;
			}
			&-dingyue {
				display: inline-block;
				font-size: 12px;
				font-weight: 700;
				border-radius: 15px;
				padding: 2px 5px;
			}
			&-border {
				border: 1px solid #1ABC9C;
				color: #1ABC9C;
				background: #fff;
			}
			&-btn {
				color: #fff;
				background-color: #1ABC9C;
				border: none
			}
		}
	}
	.service {
		margin-right: 20rpx;
		display: inline-flex;
		&-img {
			width: 76px;
			height: 76px;
			background: #fff;
			border-radius: 4px;
			margin-right: 4px
		}
		&-right {
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			&-top {
				font-size: 14px;
				font-weight: 700;
				color: #34495E;
				max-width: 130px;
				white-space: normal;
				word-break: break-all;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			&-bottom {
				&-dingyue {
					display: inline-block;
					font-size: 12px;
					font-weight: 700;
					border-radius: 15px;
					padding: 2px 5px;
				}
				&-border {
					border: 1px solid #1ABC9C;
					color: #1ABC9C;
					background: #fff;
				}
				&-btn {
					color: #fff;
					background-color: #1ABC9C;
					border: none
				}
			}
		}
		
	}
	.tuijian {
		background:#fff;
		&-top {
			width: calc(100% - 20px);
			margin-left: 10px;
			padding-top: 6px;
			padding-bottom: 10px;
			display: flex;
			align-items: center;
			&-left {
				font-size: 14px;
				font-weight: 700;
				color: #8292A2;
				flex: 1;
			}
			&-name {
				color: #1ABC9C;
				font-size: 14px;
				font-weight: 700;
			}
			&-photo {
				width: 24px;
				height: 24px;
				border-radius: 50%;
				margin: 0 10px;
			}
			&-img {
				width: 12px;
				height: 14px;
			}
		}
	}
	.tuijian {
		display: flex;
		width: 100%;
		border-bottom: 1px solid #EBEFF6;
		&-item {
			flex:1;
			padding:10px;
			&-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 22px;
				&-1 {
					font-size: 16px;
					font-weight: 700;
					color: #2A537C;
				}
				&-2 {
					font-size: 14px;
					font-weight: 400;
					color: #00BC7A;
				}
			}
			&-bottom {
				display: flex;
				margin-top: 10px;
				&-1 {
					width: 76px;
					height:76px;
					margin-right:5px;
				}
				&-2 {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					&-1 {
						color: #2A537C;
						font-size: 14px;
						font-weight: 700;
					}
					&-2 {
						color: #7C92A8;
						font-size: 12px;
						font-weight: 400;
					}
					&-4 {
						display: -webkit-box;
						  -webkit-box-orient: vertical;
						  -webkit-line-clamp: 2; /* 限制文本显示的行数 */
						  overflow: hidden;
						  text-overflow: ellipsis;
						  color: #2A537C;
						  font-size: 14px;
						  font-weight: 700;
						  max-width: 80px;
					}
					&-3 {
						background-color: #00BC8D;
						border-radius: 10px;
						font-size: 12px;
						font-weight: 700;
						width:68px;
						height:26px;
						text-align: center;
						line-height: 26px;
						color:#fff;
					}
				}
			}
		}
	}
	.jiaonang {
		width: 750rpx;
		position: fixed;
		top: 0;
		z-index: 999;
		&-box {
			margin-left: 10px;
		}
		&-div {
			display: flex;
			align-items: center;
			border: 1px solid #CBD1D8;
			background: #fff;
			border-radius: 999px;
			padding: 0 10px;
			height:100%;
			&-img {
				width:16px;
				height: 16px
			}
			&-txt {
				font-size: 14px;
				font-weight: 500;
				color: #1ABC9C;
			}
			&-input {
				flex: 1;
				margin: 0 8px;
				color: #34495E;
				font-size: 14px;
				font-weight: 500;
			}
		}
	}
	.top {
		width: 100%;
		height: 94rpx;
		display: flex;
		position: sticky;
		z-index: 10;
		left: 0;
		top:0;
		background: #fff;
		border-bottom: 1px solid #EAECEF;
		&-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #2E4964;
			&_active {
				color: #1ABC9C;
				font-weight: bold;
			}
		}
		&-line {
			width: 20rpx;
			height: 8rpx;
			background: #1ABC9C;
			border-radius: 40rpx;
			position: absolute;
			bottom: 4px;
			transition: all .3s;
		}
	}
	.left12 {
		left: calc(37.5% - 10rpx)
	}
	.left62 {
		left: calc(62.5% - 10rpx)
	}
	.sub-btn {
		z-index: 99;
		position: fixed;
		left: 40rpx;
		bottom: calc(constant(safe-area-inset-bottom) + 166rpx);
		bottom: calc(env(safe-area-inset-bottom) + 166rpx);
		font-size: 20px;
		font-weight: bold;
		line-height: 28px;
		color:#fff;
		width: 670rpx;
		height: 136rpx;
		border-radius: 100rpx;
		background: #1ABC9C;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		box-shadow: 0px 5px 45px 0px #ABB6C1,inset 0px -10px 16px 0px rgba(255, 255, 255, 0.15),inset 0px 3px 5px 0px rgba(255, 255, 255, 0.15),inset 3px 10px 15px 0px rgba(255, 255, 255, 0.35);
		&-1 {
			font-size: 14px;
			color:#f4f6f7
		}
	}
	.sub-view {
		width: 100%;
		height: 152rpx;
		border-radius: 40rpx 40rpx 0px 0px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(255, 255, 255, .25);
		box-sizing: border-box;
		/* 咪呀哈咪.配色方案/淡灰蓝-轻度 */
		backdrop-filter: blur(10px);
		border-width: 1px 0px 0px 0px;
		border-style: solid;
		border-color: #FFFFFF;
		font-size: 32rpx;
		color: #1ABC9C;
		z-index: 99;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
	}
	.content {
		position: absolute;
		width: 100%;
		bottom: 60px;
		overflow: scroll;
		box-sizing: border-box;
	}

	.scroll-item-card {
		padding: 10px;
		background-color: white;
		border-bottom: 1px solid #ecefea;

		.service-detail {
			.service-detail-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 15px;
				margin-right: 5px;
				height: 86px;
				border-radius: 10px;
				border-bottom: 1px solid #CBD1D;

				.service-detail-item-pic {
					height: 86px;
					width: 86px;
					margin-right: 10px;
					border-radius: 10px;
					background-color: #F4F6F7;
				}

				.service-detail-item-title {
					display: inline-block;
					color: #34495E;
					font-size: 16px;
					width: 95%;
					white-space: normal;
					word-break: break-all;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.service-detail-button {
					display: inline-block;
					font-size: 14px;
					border: 1px solid #1ABC9C;
					background-color: white;
					color: #1ABC9C;
					font-weight: 700;
					border-radius: 15px;
					padding: 5px 10px 5px 10px;
					z-index: 10;
					position: relative;
					bottom: 0px;
				}
			}
		}
	}
</style>